<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{width:50px;}
    </style>
</head>
<body>
    <input type="text" id="num1">
    <select id="computed">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input type="text" id="num2">
    <input type="button" value="=" id="btn">
    <input type="text" id="result" disabled>
</body>
<script>
    // 获取元素
    var oNum1 = document.getElementById("num1");
    var oNum2 = document.getElementById("num2");
    var oComputed = document.getElementById("computed");
    var oBtn = document.getElementById("btn");
    var oResult = document.getElementById("result");
    
    // 添加事件
    oBtn.onclick = function(){
        
        // 获取数据
        var a = oNum1.value-0;
        var b = oNum2.value*1;

        // 计算
        var res = 0;
        switch(oComputed.value){
            case "+": res = a+b; break;
            case "-": res = a-b; break;
            case "*": res = a*b; break;
            case "/": res = a/b; break;
            case "%": res = a%b; break;
        }

        // 将计算结果放入容器
        oResult.value = res;
    }
</script>
</html>